<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'teacherbanji' }">项目管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="new-box">
      <el-button type="danger " @click="showDialog">新增项目</el-button>
    </div>

     <el-table
                :data="protxtList"
                style="width:70%;margin-top:20px"
             >
                <el-table-column label="序号"  type="index">
                   
                </el-table-column>
              
                 <el-table-column
                    label="学科编号"
                >
                    <template slot-scope="scope">
                        <el-tag  effect="dark" type="danger"> {{scope.row.xkid}}</el-tag>
                    </template>
                </el-table-column>
                  <el-table-column
                    label="项目名字"
                >
                    <template slot-scope="scope">
                        <el-tag  effect="dark" type="primary"> {{scope.row.proname}}</el-tag>
                    </template>
                </el-table-column>
                  <el-table-column
                    label="项目编码"
                >
                    <template slot-scope="scope">
                        <el-tag  effect="dark" type="success"> {{scope.row.procode}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-popconfirm
                            confirmButtonText='好的'
                            cancelButtonText='不用了'
                            icon="el-icon-info"
                            iconColor="red"
                            title="这个操作很危险哦,真的要删除"
                            @onConfirm="deleteItem(scope.row._id)"
                            >
                            <el-button slot="reference" type="danger" size="small" >删除</el-button>
                         </el-popconfirm>
                    </template>
                 </el-table-column>
             </el-table>    



    <el-dialog title="新增学科" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form :rules="rules" :model="form" ref="proref" label-psition="yop">
        <el-form-item label="项目学科" prop="xkname">
          <el-select v-model="form.xkid">
            <el-option v-for="(xk,i) in xuekeList" :key="i" :label="xk.xkname" :value="xk.xkid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" prop="proname">
          <el-input v-model="form.proname" />
        </el-form-item>
        <el-form-item label="项目编号" prop="proid">
          <el-input v-model="form.proid" />
        </el-form-item>
        <el-form-item label="项目编码" >
        <p v-text="procode"></p>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">暂不新增</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
          proid:""
      },
      rules: {
        xkid: [{ required: true, message: "请选择学科", trigger: "change" }],
        proname: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        proid: [{ required: true, message: "请输入项目编码", trigger: "blur" }],
      },

      xuekeList: [],
      procode: "",
      protxtList:[]
    };
  },
  computed: {},
  watch: {
    form: {
      deep: true,
      handler(newVal) {
        this.procode = newVal.xkid + "-" + newVal.proid;
      },
    },
  },
  methods: {
    add() {
         this.$refs.proref.validate(valid=>{
                if(valid){
                   this.$axios.post("/vue/addprotxt",{
                       ...this.form,
                       procode:this.procode
                   }).then(res=>{
                       if(res.data.type){
                          this.dialogVisible = false; 
                          this.protxtList.unshift({
                            ...this.from,
                            procode:this.procode
                          })
                          this.form={};
                       }
                   })
                }else{
                    this.$message.error("请先完善所有信息再提交...")
                }
            })
    },
    showDialog() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
  mounted() {
    this.$axios.post("/vue/getxueke")
    .then(res => {
      this.xuekeList = res.data.result;
    });
    this.$axios.post("/vue/getpronamelist")
    .then(res=>{
        this.protxtList = res.data.result;
    })
  },
};
</script>